import { ReactNode } from "react";
import Image from "next/image";
import Link from "next/link";

interface CardProps {
  title: string;
  description?: string;
  imageSrc?: string;
  imageAlt?: string;
  href?: string;
  footer?: ReactNode;
  className?: string;
  children?: ReactNode;
}

export default function Card({
  title,
  description,
  imageSrc,
  imageAlt = "",
  href,
  footer,
  className = "",
  children,
}: CardProps) {
  const content = (
    <>
      {imageSrc && (
        <div className="h-48 relative overflow-hidden">
          <Image
            src={imageSrc}
            alt={imageAlt}
            fill
            className="object-cover"
          />
        </div>
      )}
      <div className="p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
        {description && <p className="text-gray-600 mb-4">{description}</p>}
        {children}
        {footer && <div className="mt-4">{footer}</div>}
      </div>
    </>
  );

  // 基础样式
  const baseStyles = "bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow";
  const combinedStyles = `${baseStyles} ${className}`;

  // 如果提供了href，将卡片包装在链接中
  if (href) {
    return (
      <Link href={href} className={combinedStyles}>
        {content}
      </Link>
    );
  }

  // 否则渲染为普通div
  return <div className={combinedStyles}>{content}</div>;
} 